<template>

    <div>
        <!-- 标题区域 -->
        <van-nav-bar title="登陆豆瓣" />
        <!-- 表单区域 -->
        <van-form @submit="onSubmit">
            <!-- 手机号 -->
            <van-cell-group inset>
                <van-field v-model="username" name="username" label="手机号" placeholder="手机号"
                    :rules="[{ pattern, message: '请填写手机号' }]">
                </van-field>
                <!-- 昵称 -->
                <van-field v-model="name" name="name" label="昵称" placeholder="昵称"
                    :rules="[{ required: true, message: '请填写昵称' }]">
                </van-field>

                <!-- 密码 -->
                <van-field v-model="password" type="password" name="password" label="密&nbsp;&nbsp;&nbsp;&nbsp;码"
                    placeholder="密码" :rules="[{ required: true, message: '请填写密码' }]" />
            </van-cell-group>
            <!-- 按钮 -->
            <div style="margin: 16px;">
                <van-button round block type="success" native-type="submit">
                    立即登陆
                </van-button>
            </div>
        </van-form>
    </div>
</template>

<script setup>
// 手机号正则
let pattern = /^1[3-9]\d{9}$/

import { ref } from 'vue';
let name = ref('')
const username = ref('');
const password = ref('');

import { useRouter } from 'vue-router';
const router = useRouter()
import { loginApi } from '../api/api';
import { showFailToast, showSuccessToast } from 'vant';
const onSubmit = () => {
    loginApi(username.value, password.value, name.value).then((res) => {
        console.log(res);
        if (res.data.code == 0) {
            localStorage.setItem('token', res.data.token)
            localStorage.setItem('name', res.data.name)
            localStorage.setItem('username', res.data.username)
            showSuccessToast('登陆成功')
            router.push('/home/index')
        } else {
            showFailToast('登陆失败')
        }
    })
}

</script>

<style lang="scss" scoped></style>